<template>
  <div>
    <div class="oralLoss">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{name: 'respectIndex' }">尊老卡</el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ respectFlag == 'respectQ1' ? '尊老卡领卡机构查询' : '尊老卡更换机构受理' }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <!--搜索条件区域-->
      <div class="lossSearch">
        <el-row :gutter="6">
          <el-form :inline="true" :model="form" :rules="rules" class="demo-form-inline" ref="form">
            <el-form-item label="证件号码" prop="idNum">
              <el-input v-model="form.idNum" size="mini" placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <!--客户信息-->
      <informationShow :data="respectData" :option="respectOption"></informationShow>
      <div v-if="respectData.ywzt == '4'" style="color: red;margin: 5px 0px;">
        注: 请于20个工作日内至{{ respectData.BranchNm }}网点领取，如需更换领卡机构，请致电本行客服956111或就近前往苏州农商银行网点柜面咨询
      </div>
      <informationShow v-show="respectFlag == 'respectQ2'" :data="updateGroupData" :option="updateGroupOption" @changeModel="changeModel"></informationShow>
      <el-row v-show="respectFlag == 'respectQ2'" class="mgt20">
        <el-col :span="24" class="txt-right">
          <el-button type="primary" class="btn btn-primary" @click="applyAlter">申请变更</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import informationShow from '@/components/common/respectInformation'
  import { queryLoss } from '@/api/bankBiz/loss/loss'

  export default {
    name: 'respectQ1',
    components: {
      informationShow
    },
    data() {
      let validateIdCard = function (rule, value, callback) {
        let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
        if (idcardReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的证件号码！'))
        }
      }
      return {
        respectFlag: 'respectQ1',
        form: {
          idNum: ''
        },
        rules: {
          idNum: [
            { required: true, trigger: "blur", validator: validateIdCard }
          ],
        },
        respectOption: {},
        respectData: {},
        updateGroupOption: {},
        updateGroupData: {},
        respectId: ''
      }
    },
    created() {
      this.respectOption = respectOptions.moduleOption.respectInfo
      this.updateGroupOption = respectOptions.moduleOption.cardGroupInfo
    },
    mounted() {
      let self = this
      self.respectFlag = self.$route.path.split('/')[2]
      // 振铃进线初始化
      window.eventEmitter.$on('EventCallRecordChange', (data) => {

      })
      // 挂机初始化
      window.eventEmitter.$on('EventInfoReset', (data) => {
        self.initOption()
      })
    },
    methods: {
      initOption() {
        this.form.idNum = ''
        this.respectData = {}
        this.updateGroupData = {}
        this.respectId = ''
      },
      onSubmit() {
        let that = this
        that.$refs['form'].validate((valid) => {
          if (valid) {
            if (that.$store.getters.GET_OFFLINESTATUS) {
              window.globalUiKit.notify('提示', '离线状态不能操作！', 'error')
              return
            }
            that.customerInfo()
          }
        })
      },
      customerInfo() {
        let params = {
          namespace: 'Respect',
          key: 'customerInfo',
          query: {
            zjhm: this.form.idNum
          }
        }
        queryLoss(params).then((res) => {
          if (res.data.code == 200) {
            let data = res.data.data.resList[0]
            let idcard = data.lkdlrzjhm.trim()
            if (idcard) {
              data.lkdlrzjhm = idcard.slice(0, 4) + '**********' + idcard.slice(-4)
            }
            data.zjhm = this.form.idNum.slice(0, 4) + '**********' + this.form.idNum.slice(-4)
            this.respectData = data
            this.updateGroupData = data
          } else {
            this.respectData = []
            this.updateGroupData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      changeModel(value) {
        console.log(value)
        this.respectId = value
      },
      applyAlter() {
        if (this.$store.getters.GET_OFFLINESTATUS) {
          window.globalUiKit.notify('提示', '离线状态不能操作！', 'error')
          return
        }
        if (!this.updateGroupData.sllsh) {
          window.globalUiKit.notify('提示', '请先查询客户信息！', 'error')
          return
        }
        if (!this.respectId) {
          window.globalUiKit.notify('提示', '请选择新领卡机构！', 'error')
          return
        }
        if (this.respectId == this.respectData.lkjgm) {
          window.globalUiKit.notify('提示', '原领卡机构和新领卡机构不能相同！', 'error')
          return
        }
        this.$confirm('是否要变更尊老卡领卡机构?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.applyAlterFun()
        }).catch(() => {})
      },
      applyAlterFun() {
        let params = {
          namespace: 'Respect',
          key: 'authorities',
          query: {
            zjhm: this.form.idNum,
            slrq: this.updateGroupData.slrq,
            sllsh: this.updateGroupData.sllsh,
            xlkjgm: this.respectId
          }
        }
        queryLoss(params).then((res) => {
          if (res.data.code == 200) {
            this.$set(this.updateGroupData, 'sqbgzt', '成功')
          } else {
            this.$set(this.updateGroupData, 'sqbgzt', '失败')
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    // 监听路由
    watch: {
      '$route'(to, from) {
        if (to.name == 'respectQ1' || to.name == 'respectQ2') {
          this.initOption()
          this.respectFlag = to.name
        }
      }
    }
  }
</script>

<style scoped>
  .el-breadcrumb {
    padding: 10px 0 !important;
  }

  .el-button--primary {
    margin-top: 5px !important;
  }

  .oralLoss .el-form-item {
    margin-bottom: 0 !important;
  }

  .topTit {
    line-height: 40px;
  }

  .oralLoss .avue-group__item {
    padding: 0 !important;
  }

  .oralLoss .avue-form__group > div {
    padding: 0 !important;
  }

  .mgt20 {
    margin-top: 10px;
  }

  .verificationTips {
    width: 100%;
    height: 1px;
    text-align: right;
    position: relative;
  }

  .verificationTips span {
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 99;
  }
</style>
